<template>
  <div class="check-button" :class="{checked: isChecked}">
    <img src="~assets/img/cart/tick.svg" alt="" :class="{hide: !isChecked}">
  </div>
</template>

<script>
  export default {
    name: "CheckButton",
    props: {
      isChecked: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

<style scoped>
.check-button{
  border: 1px solid #aaa;
  border-radius: 50%;
  padding: 1px;
}
.checked{
  border-color: var(--color-tint);
  background: var(--color-tint);
}
.hide{
  visibility: hidden;
}
</style>